<template>
  <base-item title="区域受理情况">
    <template #content>
      <div id="item-style1"></div>
    </template>
  </base-item>
</template>
<script setup lang="ts">
//组件

//接口


//api
import {onMounted, reactive, ref, watch} from 'vue';
import BaseItem from "@/views/home/compoments/baseItem.vue";
import * as echarts from "echarts";
import useSystemStore from "@/store/modules/system/system";
import useHomeStore from "@/store/modules/home/home";
import {itemStyle1TypeYsx, itemStyle1TypeSczt} from "@/store/modules/home/type";
//data
const systemStore = useSystemStore()
const homeStore = useHomeStore()
const options = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // Use axis to trigger tooltip
      type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
    }
  },
  legend: {},
  grid: {
    top: '8%',
    left: '3%',
    right: '8%',
    bottom: '10%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    axisLabel: {
      fontSize: 16,
      color: 'rgb(16,16,16)'
    },
    splitLine: { //修改刻度线的样式
      lineStyle: {
        color: 'rgb(232,232,232)',
      }
    },
    name: '受理量(宗)',
    nameTextStyle: {
      color: "#101010",
      fontSize: 16,
      align: 'center', //name对齐的方式
      lineHeight: 30,
      padding: [20, 0, 0, 0]
    },
    nameLocation: "middle", // y轴name处于y轴的什么位置
  },
  yAxis: {
    type: 'category',
    data: [...systemStore.cityRange].reverse().map((item) => item.name1),
    axisLabel: {
      fontSize: 16,
      color: 'rgb(16,16,16)'
    },
    axisLine: {
      lineStyle: {
        color: 'rgb(110,112,121)', //一点点的那个线条的颜色
      },
    },
  },
  series: []
}
let mychart: any = null

/*
函数
*/

/**************************接口函数**************************/


/**************************操作函数**************************/
const initEcahts = () => {
  if (homeStore.platformId === 0) {
    let y1: string[] = []
    let y2: string[] = []
    systemStore.cityRange.forEach((city, index) => {
      homeStore.itemStyle1Data.forEach((item: any) => {
        if (city.name1 == item.areaName || city.name2 == item.areaName) {
          y1.push(item.daiban)
          y2.push(item.yiban)
        }
      })
    })
    options.yAxis.data = [...systemStore.cityRange].reverse().map((item) => item.name1),

        options.series = [
          {
            name: '已办事项',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
              color: 'white'
            },
            emphasis: {
              focus: 'series'
            },
            data: y2.reverse(),
            itemStyle: {
              color: 'rgb(42,153,255)'
            }
          },
          {
            name: '待办事项',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
              color: 'white'
            },
            emphasis: {
              focus: 'series'
            },
            data: y1.reverse(),
            itemStyle: {
              color: 'rgb(104,187,196)'
            }
          },
        ] as any
    options.legend = {}
    initItem1()
  } else {
    let y1: string[] = []
    systemStore.cityRangeOther.forEach((city, index) => {
      homeStore.itemStyle1Data.forEach((item: any) => {
        if (city.name1 == item.areaName || city.name2 == item.areaName) {
          y1.push(item.num)
        }
      })
    })
    console.log(homeStore.itemStyle1Data)
    options.yAxis.data = [...systemStore.cityRangeOther].reverse().map((item) => item.name1),
        options.series = [
          {
            name: '诉求量',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
              color: 'rgb(79,158,252)',
              position: 'right'
            },
            emphasis: {
              focus: 'series'
            },
            data: y1.reverse(),
            itemStyle: {
              color: 'rgb(42,153,255)'
            },

          },
        ] as any
    options.xAxis.name = '诉求量(宗)'
    //@ts-ignore
    delete options.legend
    initItem1()
  }
}


const initItem1 = () => {
  if (mychart != null && mychart.dispose) {
    mychart.dispose();
  }
  mychart = echarts.init(document.getElementById('item-style1'))
  mychart.setOption(options)
}

defineExpose({
  initEcahts
})

</script>

<style lang="scss" scoped>
#item-style1 {
  width: 102%;
  height: 350px;
}
</style>
